<template>
  <div class="bg-container theme-bg-color page">
    <div class="beauty-bg">
      <swiper ref="swiper" :options="swiperOption">
        <swiper-slide style="height: 191.6px;">
          <div><img :src="require('../assets/img/tip/15.jpg')"></div>
          <div><img :src="require('../assets/img/tip/16.jpg')"></div>
        </swiper-slide>
        <swiper-slide style="height: 191.6px;">
          <div><img :src="require('../assets/img/tip/13.jpg')"></div>
          <div><img :src="require('../assets/img/tip/14.jpg')"></div>
        </swiper-slide>
        <swiper-slide style="height: 191.6px;">
          <div><img :src="require('../assets/img/tip/11.jpg')"></div>
          <div><img :src="require('../assets/img/tip/12.jpg')"></div>
        </swiper-slide>
        <swiper-slide style="height: 191.6px;">
          <div><img :src="require('../assets/img/tip/9.jpg')"></div>
          <div><img :src="require('../assets/img/tip/10.jpg')"></div>
        </swiper-slide>
        <swiper-slide style="height: 191.6px;">
          <div><img :src="require('../assets/img/tip/7.jpg')"></div>
          <div><img :src="require('../assets/img/tip/8.jpg')"></div>
        </swiper-slide>
        <swiper-slide style="height: 191.6px;">
          <div><img :src="require('../assets/img/tip/5.jpg')"></div>
          <div><img :src="require('../assets/img/tip/6.jpg')"></div>
        </swiper-slide>
        <swiper-slide style="height: 191.6px;">
          <div><img :src="require('../assets/img/tip/3.jpg')"></div>
          <div><img :src="require('../assets/img/tip/4.jpg')"></div>
        </swiper-slide>
        <swiper-slide style="height: 191.6px;">
          <div><img :src="require('../assets/img/tip/1.jpg')"></div>
          <div><img :src="require('../assets/img/tip/2.jpg')"></div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="bg-wrapper">
      <div class="login">
        <van-nav-bar
            left-arrow
            @click-left="$router.back()"
        />
        <div class="wrapper">
          <div class="logo-container">
            <div class="logo-wrapper"><img class="logo-img"
                                           :src="require('../assets/img/tip/logo.png')"
            ></div>
          </div>
          <div class="loginForm">

            <van-field v-model="username" class="input" placeholder="请输入用户名"/>

            <van-field v-model="password" class="input margin-t-20" type="password"
                       right-icon="iconfont iconfont-xsma right-icon"
                       placeholder="请输入登录密码"/>

            <van-field v-model="captcha" class="input margin-t-20" type="captcha"
                       placeholder="请输入验证码">
              <template #right-icon>
                <img ref="captcha" src="/api/member/captcha" @click="$refs.captcha.src = '/api/member/captcha'"/>
              </template>
            </van-field>

            <van-button class="reg-btn" :class="isComplete?'active' : ''" @click="gotoLogin">登 录</van-button>

            <div class="tip">
              <span class="tip-text">还没有账号？</span>
              <span class="tip-register"
                    @click="$router.push({ name: 'Register', params:{ refresh: true }})">前往注册</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import {swiper, swiperSlide} from "vue-awesome-swiper";
import {Toast} from "vant";
import cookie from "@utils/store/cookie";

export default {
  name: "Login",
  components: {swiper, swiperSlide},
  computed: {
    isComplete: function () {
      return this.username && this.password && this.captcha
    }
  },
  watch: {
    "$route.params.refresh"(o) {
      window.location.reload();
    }
  },
  data: function () {
    return {
      username: "",
      password: "",
      captcha: "",
      checked: false,
      swiperOption: {
        loop: true, // 循环模式
        direction: "vertical",
        effect: "slide", // 设置为滑动效果
        speed: 5000, // 滚动速度（毫秒）
        slidesPerView: "auto",
        loopAdditionalSlides: 16,
        freeMode: true,
        autoplay: {
          delay: 0, // 自动播放间隔
          disableOnInteraction: false, // 用户交互时禁用自动播放
          stopOnLastSlide: false
        },
        observer: true
      }
    }
  },
  methods: {
    gotoLogin: function () {
      if (!this.isComplete) {
        Toast.fail({
          message: "用户名或密码不允许为空",
          duration: 3000,
          forbidClick: true
        })
        return;
      }
      let that = this;
      Toast.loading({
        message: "登录中, 请稍后",
        forbidClick: true,
        duration: 0
      })
      this.$store.dispatch("Login", {username: that.username, password: that.password, captcha: that.captcha}).then(e => {
        Toast.clear();
        Toast.success({
          message: "登录成功",
          duration: 1000,
          forbidClick: true,
          onClose: function () {
            let gotoName = cookie.get("GOTO_NAME") || "Mine";
            cookie.remove("GOTO_NAME");
            that.$router.push({name: gotoName, params: {refresh: true}});
          }
        })
      }).catch(e => {
        Toast.clear();
        that.$refs.captcha.src = '/api/member/captcha';
      })
    }
  }
};
</script>
<style scoped>
::v-deep .van-field__right-icon > i, ::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title {
  color: var(--van-nav-bar-icon-color);
}

::v-deep .van-nav-bar {
  background-color: transparent;
}

::v-deep .van-hairline--bottom:after {
  border-bottom-width: 0px;
}

.beauty-bg {
  background-color: transparent;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

::v-deep .beauty-bg .swiper-container {
  width: 100%;
  height: 100%
}

::v-deep .beauty-bg .swiper-container .swiper-slide {
  width: 100%;
  height: 20% !important;
  display: flex;
  justify-content: center;
  align-items: center
}

::v-deep .beauty-bg .swiper-container .swiper-wrapper {
  transition-timing-function: linear
}

.beauty-bg .swiper-container .swiper-slide > div {
  width: 50%;
  height: 4.98667rem
}

.beauty-bg .swiper-container .swiper-slide > div > img {
  width: 100%;
  height: 100%
}

.beauty-bg .swiper-container .swiper-slide > div:nth-child(2) {
  margin-top: -50%
}

.bg-container {
  position: relative;
  bottom: 0
}

.bg-container .bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.logo-container {
  margin: 0 auto;
  width: 45%
}

.logo-container .logo-wrapper {
  position: relative;
  padding-bottom: 62.5%
}

.logo-container .logo-wrapper .logo-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain
}


.country-code .search-bar .input {
  flex: 1;
  height: .85333rem;
  font-size: .4rem;
  padding: .16rem .53333rem;
  border-radius: 1.2rem
}

.login-dialog {
  position: fixed;
  display: flex;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 8rem;
  height: 7.46667rem;
  z-index: 16;
  background-color: #fff;
  border-radius: .13333rem
}

.login-dialog .icon-title {
  position: absolute;
  width: 1.86667rem;
  height: 1.86667rem;
  border-radius: 50%;
  top: -.66667rem;
  left: calc(50% - .8rem);
  background-color: #fff;
  z-index: 2002;
  display: flex;
  align-items: center;
  justify-content: center
}

.login-dialog .icon-title img {
  width: 1.6rem;
  height: 1.6rem
}

.login-dialog .close-btn {
  position: absolute;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  bottom: -1.06667rem;
  left: calc(50% - .4rem);
  color: #fff
}

.login-dialog .swiperSlide {
  margin: 1.06667rem auto auto
}

.login-dialog .swiperSlide > div {
  width: 6.66667rem;
  height: 6.66667rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start
}

.login-dialog .swiperSlide > div > span {
  font-size: .48rem;
  font-weight: 700;
  margin-bottom: .13333rem;
  color: #979799
}

.login-dialog .swiperSlide > div p {
  width: 100%;
  height: 4.8rem;
  overflow: auto;
  color: #000 !important;
  font-size: .4rem
}

.login-dialog .swiperSlide > div p * {
  color: #000 !important;
  font-size: .4rem
}

.van-icon-success {
  color: #fcf0fa
}

.login {
  height: 100%
}

.login .nav {
  background: none
}

@-webkit-keyframes rainbow-c94a3552 {
  0% {
    width: 1.6rem;
    height: 1.6rem
  }

  50% {
    width: 1.73333rem;
    height: 1.73333rem
  }

  to {
    width: 1.6rem;
    height: 1.6rem
  }
}

@keyframes rainbow-c94a3552 {
  0% {
    width: 1.6rem;
    height: 1.6rem
  }

  50% {
    width: 1.73333rem;
    height: 1.73333rem
  }

  to {
    width: 1.6rem;
    height: 1.6rem
  }
}

.login .wrapper {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 2.13333rem
}

.login .wrapper .title {
  line-height: 1.86667rem;
  text-align: center;
  font-size: .48rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .05333rem
}

.login .wrapper .login-input-border .input {
  border: .02667rem solid #fff
}

::v-deep .login .wrapper .van-field__control {
  font-size: .37333rem !important;
  color: #fff !important
}

.login .wrapper .login-weight-font .van-field {
  border-width: .05333rem !important
}

.login .wrapper .loginForm {
  padding: 0 .8rem
}

.login .wrapper .loginForm .input {
  padding: .26667rem .4rem;
  border-radius: .53333rem;
  text-align: center;
  line-height: .53333rem;
  font-size: .34667rem;
  color: #fff;
  background-color: rgba(0, 0, 0, .5)
}

.login .wrapper .loginForm .input.margin-t-20 {
  margin-top: .53333rem
}

.login .wrapper .loginForm .input.sms-input {
  padding: 0 0 0 .4rem;
  line-height: 1.06667rem
}

.login .wrapper .loginForm .input .right-icon {
  color: #979799
}

.login .wrapper .loginForm .input .sms-btn {
  padding: 0 .4rem;
  height: 100%;
  color: #fff;
  border-radius: 1.33333rem 0 0 1.33333rem;
  font-size: .32rem;
  font-weight: 500;
  box-shadow: 0 0 .21333rem 0 #e38afb;
  background-color: #e38afb
}

.login .wrapper .loginForm .input .sms-num {
  width: 1.06667rem;
  color: #8d8c8c
}

.login .wrapper .loginForm .input .phone-code {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%
}

.login .wrapper .loginForm .input .phone-code span {
  font-size: .34667rem;
  line-height: .37333rem;
  color: #979799;
  font-weight: 500
}

.login .wrapper .loginForm .tip {
  margin-top: .53333rem;
  display: flex;
  align-items: center;
  justify-content: right;
}

.login .wrapper .loginForm .tip .tip-text {
  margin-left: .13333rem;
  font-size: .29333rem;
  color: #fff;
  font-weight: 500;
  line-height: .42667rem
}

.login .wrapper .loginForm .tip .tip-register {
  margin-left: .13333rem;
  font-size: .29333rem;
  color: #fff;
  font-weight: 500;
  line-height: .42667rem;
  font-weight: bolder;
  cursor: pointer;
}

.login .wrapper .loginForm .reg-btn {
  margin-top: .4rem;
  width: 100%;
  height: 1.22667rem;
  line-height: 1.22667rem;
  border-radius: .53333rem;
  background-color: #cacacc;
  color: #fff;
  font-size: .42667rem;
  font-weight: bolder;
  border: none
}

.login .wrapper .loginForm .reg-btn.active {
  color: #fcf0fa;
  background-color: #e38afb
}

</style>
